<template>
<div class="itemAllDiv">
  <div class="shareProduct">
    <div class="supportCenter">
      <div>
        <div class="supportCenterLogo"><img :src="shareIndetailAllItem.userHeadUrl"></div>
        <p>{{shareIndetailAllItem.userName}}</p>
      </div>
    </div>
    <div class="shareProductIndetail">
      <div class="shareProductImg"><img :src="shareIndetailAllItem.productUrl"></div>
      <div class="shareProductTxt">
        <h3 class="shareProductName">{{shareIndetailAllItem.productName}}</h3>
        <p class="shareProductPrice">￥{{shareIndetailAllItem.payMoney}}</p>
      </div>
    </div>
  </div>
  <div>
    <record-user 
    :sharestate="shareIndetailAllItem.status"
    :shareUser="shareIndetailAllItem.joinerUserResponseList" 
    :randomIntegral="shareIndetailAllItem.cardIntegral">
    </record-user>
  </div>
</div>
  
</template>

<script>
  import recordUser from './record-user.vue'
  export default {
    components:{
      recordUser
    },
    props:{
      shareIndetailAllItem:{
        type: Object,
      }    
    },
  }
</script>

<style scoped>
img{
  display: block;
}
.itemAllDiv{

}
.shareProduct{
  width: auto;
  height: auto;
  background: #fff;
  margin: 95rpx 35rpx 0rpx;
  border-radius: 20rpx;
  border: 1px solid #49585F;
  padding: 0 40rpx;
}
.shareProduct .supportCenter{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: #595959;
  height: 125rpx;
  text-align: center;
}
.shareProduct .supportCenter .supportCenterLogo{
  width: 121rpx;
  height: 121rpx;
  border-radius: 100%;
  margin: -61rpx auto 0;
}
.shareProduct .supportCenter .supportCenterLogo img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.shareProduct .shareProductIndetail{
  width: 100%;
  display: flex;
  overflow: hidden;
  margin-bottom: 30rpx;
}
.shareProduct .shareProductIndetail .shareProductImg{
  width: 140rpx;
  height: 140rpx;
  margin-right: 30rpx;
}
.shareProduct .shareProductIndetail .shareProductImg img{
  width: 100%;
  height: 100%;
}
.shareProduct .shareProductIndetail .shareProductTxt{
  flex: 1;
  overflow: hidden;
}
.shareProduct .shareProductIndetail .shareProductTxt .shareProductName{
  font-size: 26rpx;
  color: #2A2A2A;  
  margin-bottom: 30rpx;
  width: 100%;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
  word-break:break-all;
}
.shareProduct .shareProductIndetail .shareProductTxt .shareProductPrice{
  font-size: 36rpx;
  color: #e68a8a;  
}
</style>
